<template>
  <div class="definite">
    <u-navbar
      :is-back="true"
      :custom-back="BackM"
      title="我的订单"
      back-text=""
    >
    </u-navbar>
    <u-tabs-swiper
      ref="tabs"
      :list="list"
      active-color="#4dbf92"
      font-size="0.7rem"
      font-weight="500"
      count="count"
      height="80"
      :is-scroll="false"
      :current="current"
      bar-width="80"
      gutter="80"
      @change="tabsChange"
    ></u-tabs-swiper>
    <div class="item-one">
      <div class="item-time">
        <span style="padding-right: 0.5rem">2019-11-29</span>
        <span>11:30:50</span>
        <span style="float: right">交易成功</span>
      </div>
      <div class="item-content">
        <span class="img">
          <img src="../../../style/image/order/B1.jpg" alt="" />
        </span>
        <span class="description">
          充电宝充电宝充电宝充电宝 充电宝充电宝充电宝
        </span>
        <div class="item-two">
          <div class="money">¥ 100.00</div>
          <div class="num">×2</div>
          <div class="num-total">共2件</div>
        </div>
      </div>
      <div class="item-three">
        <span class="monney-total">合计：</span>
        <span class="red-money">¥ 600</span>
        <span class="look">查看物流</span>
      </div>
    </div>
    <div class="item-one">
      <div class="item-time">
        <span style="padding-right: 0.5rem">2019-11-29</span>
        <span>11:30:50</span>
        <span style="float: right">交易成功</span>
      </div>
      <div class="item-content">
        <span class="img">
          <img src="../../../style/image/order/B1.jpg" alt="" />
        </span>
        <span class="description">
          充电宝充电宝充电宝充电宝 充电宝充电宝充电宝
        </span>
        <div class="item-two">
          <div class="money">¥ 100.00</div>
          <div class="num">×2</div>
          <div class="num-total">共2件</div>
        </div>
      </div>
      <div class="item-three">
        <span class="monney-total">合计：</span>
        <span class="red-money">¥ 600</span>
        <span class="look">立即付款</span>
        <span class="cancle">取消付款</span>
      </div>
    </div>
    <div class="item-one">
      <div class="item-time">
        <span style="padding-right: 0.5rem">2019-11-29</span>
        <span>11:30:50</span>
        <span style="float: right">交易成功</span>
      </div>
      <div class="item-content">
        <span class="img">
          <img src="../../../style/image/order/B1.jpg" alt="" />
        </span>
        <span class="description">
          充电宝充电宝充电宝充电宝 充电宝充电宝充电宝
        </span>
        <div class="item-two">
          <div class="money">¥ 100.00</div>
          <div class="num">×2</div>
          <div class="num-total">共2件</div>
        </div>
      </div>
      <div class="item-three">
        <span class="monney-total">合计：</span>
        <span class="red-money">¥ 600</span>
        <span class="look">提醒发货</span>
      </div>
    </div>
    <div class="item-one">
      <div class="item-time">
        <span style="padding-right: 0.5rem">2019-11-29</span>
        <span>11:30:50</span>
        <span style="float: right">交易成功</span>
      </div>
      <div class="item-content">
        <span class="img">
          <img src="../../../style/image/order/B1.jpg" alt="" />
        </span>
        <span class="description">
          充电宝充电宝充电宝充电宝 充电宝充电宝充电宝
        </span>
        <div class="item-two">
          <div class="money">¥ 100.00</div>
          <div class="num">×2</div>
          <div class="num-total">共2件</div>
        </div>
      </div>
      <div class="item-three">
        <span class="monney-total">合计：</span>
        <span class="red-money">¥ 600</span>
        <span class="look">确认收货</span>
        <span class="cancle">查看物流</span>
      </div>
    </div>
  </div>
</template>

<script lang='ts' >
import { Component, Prop, Vue, Watch, Emit } from "vue-property-decorator";

@Component({
  //   @Component  是一个装修器   不可以在下面写语句
  name: "test",
})
export default class extends Vue {
  @Prop({
    type: String, // 父组件传递给子组件的数据类型
    required: false, // 是否必填
    default: " ", // 默认值， 如果传入的是 Object，则要 default: ()=>({}) 参数为函数
  })
  msg!: string;
  public list = [
    {
      name: "我的订单",
      ate_count: 5,
    },
    {
      name: "待付款",
      ate_count: 5,
    },
    {
      name: "待发货",
      ate_count: 5,
    },
    {
      name: "待收货",
      ate_count: 5,
    },
  ];

  created() {}

  mounted() {
    //  console.log('父组件传递的参数:',this.$parent)   //暂时不考虑
    //  uni.navigateTo({
    // url: './selectBusin'
    // });
  }
}
</script>

<style  scoped>
.definite {
  font-family: PingFang SC;
  background: #f3f5f7;
  height: 100%;
}
uni-page-body {
  height: 100%;
}
.item-one {
  margin: 0.5rem;
  background: #ffffff;
  border-radius: 0.3rem;
}
.item-time {
  padding: 0.6rem;

  font-size: 0.65rem;
  font-family: PingFang SC;
  font-weight: 400;
  color: #000000;
  border-bottom: 0.03rem #e5e5e5 solid;
}
.item-content {
  padding: 0.4rem;
  height: 3.6rem;
  font-family: PingFang SC;
  border-bottom: 0.03rem #e5e5e5 solid;
}
.img {
  float: left;
}
.img img {
  width: 3.6rem;
  height: 3.6rem;
}
.description {
  float: left;
  width: 8.43rem;
  height: 3.6rem;
  font-size: 0.7rem;
  padding-left: 0.4rem;
  font-family: PingFang SC;
  font-weight: 500;
  color: #101010;
  line-height: 0.86rem;
}
.item-two {
  float: right;
  text-align: right;
  line-height: 1.23rem;
}
.money {
  font-size: 0.7rem;
  font-family: PingFang SC;
  font-weight: 500;
  color: #101010;
}
.num {
  font-size: 0.6rem;
  font-family: PingFang SC;
  font-weight: 400;
  color: #333333;
}
.num-total {
  font-size: 0.65rem;
  font-family: PingFang SC;
  font-weight: 400;
  color: #333333;
}
.item-three {
  padding: 0.8rem 0.5rem;
}
.money-total {
  height: 0.57rem;
  font-size: 0.6rem;
  font-family: PingFang SC;
  font-weight: 400;
  color: #000000;
  line-height: 1.06rem;
}
.red-money {
  font-size: 0.7rem;
  font-family: PingFang SC;
  font-weight: 500;
  color: #f91516;
}
.look,
.cancle {
  float: right;
  width: 3.73rem;
  height: 1.27rem;
  border-radius: 1rem;
  text-align: center;
  font-size: 0.7rem;
  font-family: PingFang SC;
  font-weight: 500;
  cursor: pointer;
  line-height: 1.17rem;
}
.look {
  border: 0.05px solid #02af74;
  color: #02af74;
  margin-left: 0.6rem;
}
.cancle {
  border: 0.05px solid #666666;
  color: #666666;
}
</style>